<template>
  <el-container style="height: 100vh;">
    <!-- 顶部导航栏 -->
    <el-header height="64px" class="header">
      <div class="header-left">
        <div class="logo">
          <div class="logo-icon">📋</div>
          <div class="logo-text">项目管理双周报系统</div>
          <div class="time-display">
            <div class="current-time">{{ currentTime }}</div>
            <div class="current-date">{{ currentDate }}</div>
          </div>
        </div>
      </div>
      
      <div class="header-right">
        <div class="user-info">
          <el-avatar 
            :size="36" 
            :src="user.avatar || ''" 
            class="user-avatar"
          >
            <i class="el-icon-user"></i>
          </el-avatar>
          <span class="username">{{ user.Username || '未登录' }}</span>
          <el-divider direction="vertical" />
          <el-button type="text" @click="logout" class="logout-btn">
            <i class="el-icon-switch-button"></i>
            退出
          </el-button>
        </div>
      </div>
    </el-header>

    <el-container class="main-container">
      <!-- 侧边栏 -->
      <el-aside width="220px" class="aside">
        <el-menu 
          :default-active="$route.path" 
          router 
          class="sidebar-menu"
          background-color="#ffffff"
          text-color="#2c3e50"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/dashboard" class="menu-item">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </el-menu-item>

          <el-sub-menu index="/project" class="submenu">
            <template #title>
              <i class="el-icon-folder"></i>
              <span>项目管理</span>
            </template>
            <el-menu-item index="/project/list" class="submenu-item">
              <i class="el-icon-document"></i>
              <span>项目列表</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/report/my" class="menu-item">
            <i class="el-icon-document"></i>
            <span>双周报</span>
          </el-menu-item>

          <el-menu-item v-if="isAdmin" index="/user/manage" class="menu-item">
            <i class="el-icon-user-solid"></i>
            <span>用户管理</span>
          </el-menu-item>

          <el-menu-item v-if="isAdmin" index="/user/project" class="menu-item">
            <i class="el-icon-connection"></i>
            <span>用户项目关联</span>
          </el-menu-item>

          <el-menu-item index="/profile" class="menu-item">
            <i class="el-icon-user"></i>
            <span>个人中心</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
const user = ref(JSON.parse(localStorage.getItem('user') || '{}'))
const isAdmin = computed(() => user.value.userType === '管理员')

// 时间相关
const currentTime = ref('')
const currentDate = ref('')
let timeInterval = null

function updateTime() {
  const now = new Date()
  
  // 格式化时间 HH:MM:SS
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
  
  // 格式化日期 YYYY年MM月DD日 星期X
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

function logout() {
  localStorage.removeItem('user')
  localStorage.removeItem('userProject')
  window.location.href = '/login'
}

onMounted(() => {
  updateTime()
  // 每秒更新时间
  timeInterval = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
/* 顶部导航栏样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #fff;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #34495e;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-icon {
  font-size: 28px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.time-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.current-time {
  font-size: 16px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  color: #ecf0f1;
  line-height: 1.2;
}

.current-date {
  font-size: 12px;
  color: #bdc3c7;
  line-height: 1.2;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-avatar {
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: #ecf0f1;
}

.username {
  font-weight: 500;
  font-size: 14px;
}

.logout-btn {
  color: #ecf0f1;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 主容器样式 */
.main-container {
  height: calc(100vh - 64px);
}

/* 侧边栏样式 */
.aside {
  background: #ffffff;
  border-right: 1px solid #e8eaed;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.05);
}

.sidebar-menu {
  border: none;
  padding: 16px 0;
}

.menu-item, .submenu-item {
  margin: 2px 12px;
  border-radius: 6px;
  height: 48px;
  line-height: 48px;
  transition: all 0.2s ease;
}

.menu-item:hover, .submenu-item:hover {
  background: #f8f9fa;
  color: #409EFF;
}

.menu-item.is-active, .submenu-item.is-active {
  background: #e6f7ff;
  color: #409EFF;
  border-right: 3px solid #409EFF;
}

.menu-item i, .submenu-item i {
  margin-right: 12px;
  font-size: 16px;
  width: 16px;
  text-align: center;
}

.submenu {
  margin: 2px 12px;
}

.submenu-item {
  padding-left: 48px !important;
  margin: 2px 0;
}

/* 主内容区样式 */
.main {
  background: #f8f9fa;
  padding: 24px;
  min-height: calc(100vh - 64px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .aside {
    width: 60px !important;
    min-width: 60px !important;
  }
  
  .logo-text, .time-display {
    display: none;
  }
  
  .logo-icon {
    font-size: 24px;
  }
  
  .main {
    padding: 16px;
  }
  
  .menu-item span, .submenu-item span {
    display: none;
  }
  
  .menu-item, .submenu-item {
    text-align: center;
    padding: 0 !important;
  }
  
  .menu-item i, .submenu-item i {
    margin-right: 0;
    font-size: 18px;
  }
}
</style>